<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>测试</title>
    <!-- import Vue.js -->
    <script src="./js/vue.global.js"></script>

    <script src="js/axios.min.js"></script>
</head>
<body>
<div id="app">

    <h2>V1版本打印</h2>
    <div>
        <button @click="printText">测试打印文字</button>

        <button @click="autoOutPaper">测试走纸</button>

        <button @click="handlePrintTable">测试表格</button>

        <button @click="test">测试示例</button>
    </div>

    <br/>
    <br/>
    <h2>新版V2打印相关【增加了XY】</h2>
    <div>

        <button @click="printLabel">打印示例</button>
        <button @click="printLabel2">装配数据【需要打印的时候，调用事件】</button>
        <button @click="printNew">打印</button>
    </div>

    <br/>
    <br/>
    <h2>扫码相关</h2>
    <div>


        <!--        <button   @click="clickChoosePic">选择图片</button>-->
        <!--        <button   @click="clickChooseFile">选择文件</button>-->

        <button @click="clickScan">扫码【程序会自动判断——普通手机调用摄像头，商品会调用激光扫码头】
        </button>
        <span style="color:red">注：商米扫码可以直接使用物理按键，如果需要主动用控件扫码，也可以调用事件</span>

    </div>


    <br/>
    <br/>
    <h2>H5上传相关</h2>

    <div>

        <input type="file" accept="image/*" ref="fileInput" @change="handleFileChange"></input>
        <br/>
        <br/>

        <div>当前选中的文件是：{{ selectedFile ? selectedFile.name : '空' }}</div>

        <button @click="clickChooseFile">选择文件</button>
        <button @click="getChooseFile">获取文件</button>

        <button @click="uploadFile">上传文件</button>
    </div>


</div>


<script>

    const app = Vue.createApp({
        data() {
            return {
                selectedFile: null,
            }
        },
        mounted() {
            window['getScanData'] = (sn) => {
                alert(sn)
            }
        },
        methods: {
            handleFileChange(event) {
                this.selectedFile = event.target.files[0];
            },

            uploadFile() {

                const formData = new FormData();
                formData.append('file', this.selectedFile);

                const uploadUrl = 'http://122.112.207.45/api/erp/oss/uploadImg';

                axios.post(uploadUrl, formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                        'Authorization': 'Bearer 5cd052f2-a821-4412-909d-81e38085d735',
                    }
                })
                    .then(response => {
                        alert("成功了" + response.data.data.url)

                    })
                    .catch(error => {
                        alert('File upload failed. Error:' + error);
                    });

            },
            clickScan() {
                window.NativeApp.scan()
            },

            clickChooseFile() {
                window.NativeApp.chooseFile()
            },
            getChooseFile() {
                // var androidFile = window.NativeApp.getChooseFile()
                //
                // alert("Android File:" + androidFile);
                //
                // // 创建 H5 的 File 对象
                // var h5File = new File([androidFile], "android_file.txt", {type: "text/plain"});
                //
                // // 输出结果
                //
                // alert("H5 File:" + h5File);

            },

            printNew() {
                window.NativeApp.printCanvas(1)
                window.NativeApp.printWhiteLine(80)

            },
            printLabel2() {
                window.NativeApp.initCanvas(384, 80);
                let barcode = "20230504";
                let format2 = this.handleJSON(
                    {
                        dotWidth: 2,//必要
                        barHeight: 50,//必要
                        readable: 0,
                        align: 0,
                        rotate: 0,
                        width: 0,
                        xOffset: 1,
                        yOffset: 2,
                    });
                window.NativeApp.renderBarCode(barcode, format2);


            },
            printLabel() {

                window.NativeApp.initCanvas(400, 220);

                let format1 = this.handleJSON(
                    {
                        textSize: 24,
                        align: 0,
                        enUnderline: true,
                        enBold: true,
                        rotate: 0,
                        xOffset: 2,
                        yOffset: 2,
                    });
                window.NativeApp.renderText('文庆测试下', format1);

                let format2 = this.handleJSON(
                    {
                        dotWidth: 2,
                        barHeight: 80,
                        readable: 0,
                        align: 5,
                        rotate: 2,
                        width: 180,
                        xOffset: 200,
                        yOffset: 2,
                    });
                window.NativeApp.renderBarCode('9527', format2);

                let format3 = this.handleJSON(
                    {
                        dotSize: 4,
                        rotate: 0,
                        width: 100,
                        height: 100,
                        xOffset: 10,
                        yOffset: 120,
                    });
                window.NativeApp.renderQrCode('今天吃饭了吗', format3);

                let format4 = this.handleJSON(
                    {
                        style: 1,
                        width: 384,
                        height: 219,
                        thickness: 1,
                        xOffset: 0,
                        yOffset: 0,
                    });
                window.NativeApp.renderArea(format4);

                let format5 = this.handleJSON(
                    {
                        style: 0,
                        value: 200,
                        width: 70,
                        height: 70,

                        xOffset: 250,
                        yOffset: 100,
                    });
                window.NativeApp.renderBitmap(
                    "https://gitee.com/baowenqing/baowenqing/raw/master/images/sunmi.jpg", format5);

                let format6 = this.handleJSON(
                    {
                        textSize: 30,
                        align: 1,
                        enUnderline: true,
                        enBold: true,
                        width: 100,
                        height: 100,
                        xOffset: 150,
                        yOffset: 135,
                    });
                window.NativeApp.renderText('非要在图片旁边瞎凑', format6);


                let format7 = this.handleJSON(
                    {
                        style: 1,
                        width: 80,
                        height: 2,
                        thickness: 2,
                        xOffset: 260,
                        yOffset: 200,
                    });
                window.NativeApp.renderArea(format7);


                window.NativeApp.printCanvas(1)
                window.NativeApp.printWhiteLine(80)

            },
            test() {
                window.NativeApp.printLabel();
            },
            printText() {
                window.NativeApp.printText('我来测试一下', 42, true, true);
            },
            autoOutPaper() {
                window.NativeApp.autoOutPaper()
            },
            printLineWrap(line) {
                window.NativeApp.printLineWrap(line)
            },
            handleJSON(obj) {
                console.log(JSON.stringify(obj));
                return JSON.stringify(obj);
            },
            handlePrintTable() {
                let list1 = this.handleJSON(['鸡蛋', '个', '5']);
                let list2 = this.handleJSON([1, 1, 1]);
                let list3 = this.handleJSON([1, 1, 1]);
                window.NativeApp.printTable(list1, list2, list3)
            },

        }
    });
    app.mount("#app");


</script>

<style>
    body {
        margin: 10px;
    }

    div:not(:first-child) {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }


</style>

</body>
</html>